/*
 * @Author: Lin Hongwei
 * @Date: 2022-09-07 20:57:37
 * @LastEditTime: 2022-10-31 19:13:05
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 渲染列表
 */
import { Button, Dropdown, Menu, Modal, Table, TableProps } from "antd";
import type { ColumnsType } from "antd/es/table";
import dayjs from "dayjs";
import { Link } from "react-router-dom";
import { useDeleteProject, useEditProject } from "../../api/project";
import { ButtonNoPadding } from "../../components/lib";
import { Pin } from "../../components/pin";
import { Project } from "../../types/project";
import { User } from "../../types/user";
import { useProjectModal, useProjectQueryKey } from "./util";

interface ListProps extends TableProps<Project> {
  // list: Project[];
  users: User[];
  // retry: () => void;
  // projectButton: JSX.Element;
}
// export const List = ({ users, retry, ...props }: ListProps) => {
export const List = ({ users, ...props }: ListProps) => {
  const { mutate } = useEditProject(useProjectQueryKey());
  //使用柯里化函数优化代码
  // const pinProject = (id: number) => (pin: boolean) =>
  //   mutate({ id, pin }).then(() => retry());
  const pinProject = (id: number) => (pin: boolean) => mutate({ id, pin });

  //项目列表
  const columns: ColumnsType<Project> = [
    {
      title: <Pin checked={true} disabled={true} />,
      // onChange={checked=>mutate({ id:project.id, pin:checked })}
      render: (project) => (
        <Pin checked={project.pin} onChange={pinProject(project.id)} />
      ),
    },
    {
      title: "名称",
      //排序，localeCompare可以排序中文
      sorter: (a, b) => a.name.localeCompare(b.name),
      render: (value) => {
        // 点击项目名跳转到对应路由
        return <Link to={`${value.id}`}>{value.name}</Link>;
      },
    },
    {
      title: "部门",
      dataIndex: "group",
    },
    {
      title: "负责人",
      render: (value, project) => {
        return (
          <span>{users.find((user) => user.id === value.personId)?.name}</span>
        );
      },
    },
    {
      title: "时间",
      dataIndex: "created",
      render: (value) => {
        return <span>{value ? dayjs(value).format("YYYY-MM-DD") : "--"}</span>;
      },
    },
    {
      render: (value) => {
        return <DropdownView value={value} />;
      },
    },
  ];
  return (
    <Table
      pagination={false}
      columns={columns}
      rowKey={(row) => row.id}
      {...props}
    />
  );
  // return (
  //   <table border={1}>
  //     <thead>
  //       <tr>
  //         <th>名称</th>
  //         <th>负责人</th>
  //       </tr>
  //     </thead>
  //     <tbody>
  //       {list.map((item) => (
  //         <tr key={item.id}>
  //           <td>{item.name}</td>
  //           <td>{users.find((user) => user.id === item.personId)?.name}</td>
  //         </tr>
  //       ))}
  //     </tbody>
  //   </table>
  // );
};

const DropdownView = ({ value }: { value: Project }) => {
  //使用参数管理modal状态
  const { queryProjectDetailFromID: openEdit } = useProjectModal();

  const { mutate: submitDelete } = useDeleteProject(useProjectQueryKey());

  //删除
  const handleDelete = (id: number) => {
    Modal.confirm({
      title: "确定删除这个项目吗?",
      content: "点击确定删除",
      okText: "确定",
      cancelText: "取消",
      onOk: () => submitDelete({ id }),
    });
  };
  return (
    <Dropdown
      overlay={
        <Menu
          items={[
            {
              key: "edit",
              // label: props.projectButton,
              label: (
                <ButtonNoPadding type="link" onClick={() => openEdit(value.id)}>
                  编辑
                </ButtonNoPadding>
              ),
            },
            {
              key: "delete",
              // label: props.projectButton,
              label: (
                <ButtonNoPadding
                  type="link"
                  style={{ color: "red" }}
                  onClick={() => handleDelete(value.id)}
                >
                  删除
                </ButtonNoPadding>
              ),
            },
          ]}
        />
      }
    >
      <ButtonNoPadding type="link">...</ButtonNoPadding>
    </Dropdown>
  );
};
